<template>
<div>
<a-form :form="form" @submit.prevent="onSubmit">
      <div class="header">
          <h3>一、基本信息</h3>
          <div class="operate">
              <transition name="slide-fade">
                  <a-button type="primary" @click="returned" v-show="!disabled">还原默认</a-button>
              </transition>
              <a-button type="primary" v-if="disabled" @click="edit">修改</a-button>
              <a-button type="primary" @click="onSubmit" v-if="!disabled && is_admin == 1">保存修改</a-button>
          </div>
      </div>
      <a-row :gutter='10' class="form-main-content">
          <a-col :key="0" :span="8" class="form-item">
            <a-form-item  label="设备编号">
            {{data.id}}
            </a-form-item>
          </a-col>
          <a-col :key="1" :span="8" class="form-item">
            <a-form-item  label="设备类型">
              <a-select v-decorator="['type',{rules: [{ required: true, message: '请选择设备类型' }]}]" placeholder="请选择设备类型" @change="typeChange" v-if="!disabled">
                    <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                        {{v.name}}
                    </a-select-option>
              </a-select>
            <div  v-if="disabled">{{data.type_name}}</div>
            </a-form-item>
          </a-col>
          <a-col :key="2" :span="8" class="form-item">
            <a-form-item  label="设备型号">
              <a-select v-decorator="['model',{rules: [{ required: true, message: '请选择设备型号' }]}]" placeholder="请选择设备型号" v-if="!disabled">
                    <a-select-option v-for="v in models" :key="v.id" :value="v.id">
                        {{v.name}}
                    </a-select-option>
                </a-select>
              <div  v-if="disabled">{{data.model_name}}</div>
            </a-form-item>
          </a-col>
          <a-col :key="3" :span="8" class="form-item">
            <a-form-item  label="设备状态">
              <a-select v-decorator="['status',{initialValue:0},{rules: [{ required: true, message: '请选择状态' }]}]" placeholder="请选择状态" v-if="!disabled">
                  <a-select-option v-for="(v,k) in statuses" :key="k" :value="k">
                    {{v}}
                  </a-select-option>
                </a-select>
              <div  v-if="disabled">{{data.status_name}}</div>
            </a-form-item>
          </a-col>
          <a-col :key="4" :span="8" class="form-item">
            <a-form-item  label="归属账号">
              <a-select v-decorator="['user_id',{initialValue:0},{rules: [{ required: true, message: '请选择归属账号' }]}]" placeholder="请选择归属账号" @change="userChange" v-if="!disabled">
                  <a-select-option v-for="v in users" :key="v.id" :value="v.id">
                    {{v.username}}
                  </a-select-option>
                </a-select>
              <div  v-if="disabled">{{data.username}}</div>
            </a-form-item>
          </a-col>
          <a-col :key="5" :span="8" class="form-item">
            <a-form-item  label="联系方式">
              {{mobile}}
            
            </a-form-item>
          </a-col>
          <a-col :key="6" :span="24" class="form-item">
            <a-form-item label="备注">
              <a-textarea rows="4" placeholder="请输入备注" v-decorator="['remark']" v-if="!disabled"/>
              <div  v-if="disabled">{{data.remark}}</div>
            </a-form-item>
          </a-col>
      </a-row>
      
</a-form>
<div class="relate-service">
    <h3>二、设备使用情况</h3>
    <span>使用时长总计：{{data.duration}}</span>
    <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
    </a-table>   
</div>
</div>
</template>




<script>
    export default {
    	data(){
    		return {
          id:0,
          form: this.$form.createForm(this),
          disabled:true,
          users:[],
          types:[],
          models:[],
          data:{},
          mobile:'',
          statuses:['空闲','借出','损坏','报废','注销'],
          tableData: [],
          columns: [
              {title: '编号', dataIndex: 'id', align: 'center'},
              {title: '状态名称', dataIndex: 'status', align: 'center'},
              {title: '状态开始时间', dataIndex: 'started_at', align: 'center'},
              {title: '状态结束时间', dataIndex: 'ended_at', align: 'center'},
          ],
          pagination: {
              current: 1,
              total: 0,
              pageSize: 10,
              showQuickJumper: true,
              onChange: (page, size) => {
                  this.handleChange(page, size)
              },
          },
    		}
    	},
    	
    	methods: {
        onSubmit(form){
          this.form.validateFields((err, values) => {
            if(!err){
               this.postData(values).then(res=>{
                  if(res.id){
                    this.$message.success(res.msg);
                    this.$router.push('/role')
                  }else{
                    this.$message.error(res.msg);
                  }
               })
              
            }
          })
          
        },
        edit(){
          this.types.some(item=>{
                if(item.id == this.data.type){
                    this.models = item.models
                    return true
                }
          })
          this.disabled = false
          let that = this
          setTimeout(()=>{that.form.setFieldsValue({type:this.data.type,model:this.data.model,status:this.data.status,user_id:this.data.user_id,remark:this.data.remark})},200)
           
        },
        returned(){
          this.mobile = this.data.mobile
          this.form.setFieldsValue(this.data)
        },
        async postData(param){
          let data = await this.http('put','device/update?id='+this.id,param);
          return data;
        },
        async getDetail(id){
          let data = await this.http('get','device/view',{id:id});
          return data;
        },
        typeChange(key){
            this.types.some(item=>{
                if(item.id == key){
                    this.models = item.models
                    return true
                }
            })
            this.form.setFields({model:''});
            
            
        },
        userChange(key){
          this.users.some(item=>{
              if(item.id == key){
                  this.mobile = item.mobile
                  return true
              }
          })
        }
      },
      
      mounted(){
        this.id = this.$route.params.id
        this.http('get','devicemodel/typemodel').then(res=>{
          this.types = res
        })
        this.getDetail(this.id).then(res=>{
          res.model = String(res.model)
          this.mobile = res.mobile
          this.data = res
        })
        this.http('get','user/index',{page_size:100}).then(res=>{
          this.users = res.data
        })
      }
    
 }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/scss/mixin";
    .header {
        @include fj();
        margin-bottom: 30px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
    .relate-service {
        #update-table-1 {
            padding-left: 30px;
            padding-right: 30px;
        }
        margin-bottom: 20px;
        & > h3 {
            margin-bottom: 20px;
        }
    }
</style>
